<template>
  <div class="container">
    <div style="padding: 10px 20px;">
      <NormalMaterial :currentTab="currentTab" :tabList="tabList" :formList="formList" :queryForm="queryForm" pagePwd="Article" @tabClick="tabClick" @handleQuery="handleQuery">
        <template slot="one">
          <el-table v-loading="loading" :data="companyTableList" style="width: 100%" height="400" :header-cell-style="headerCellStyle" :row-style="rowStyle" :cell-style="cellStyle">
            <el-table-column type="index" width="55" align="center" label="序号" />
            <el-table-column label="标题" prop="materialName" min-width="220">
              <template slot-scope="{ row }">
                <div style="color: #082aff;cursor: pointer;" @click="toInfo(row  , '0')">
                  {{ row.materialName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="标签" min-width="220">
              <template slot-scope="scope">
                <tagGroupShowTable :tagGroup="scope.row.tagVOS" />
              </template>
            </el-table-column>
            <el-table-column label="创建类型">
              <template slot-scope="{ row }">
                <el-tag v-if="row.verbalType == 2" type="default" size="small">转载</el-tag>
                <el-tag v-else type="success" size="small">原创</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建人" prop="createBy" min-width="160"></el-table-column>
            <el-table-column label="创建时间" prop="createTime" min-width="180"></el-table-column>
            <el-table-column label="审核人" prop="examineBy" min-width="160"></el-table-column>
            <el-table-column label="审核时间" prop="examineTime" min-width="180">
              <template slot-scope="{ row }">
                {{ dateFormat(row.examineTime) }}
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
              <template slot-scope="{ row }">
                <el-button type="text" @click="share" class="tag-copy" :data-clipboard-text="routerPath + row.id">分享
                </el-button>
                <el-button type="text" @click="edit(row, 'one' , 0)" v-hasPermi="['wecom:material:edit:corp']">编辑
                </el-button>
                <el-button type="text" @click="del(row)" v-hasPermi="['wecom:material:delete:corp']">删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="companyPageNum" :pageSize="companyPageSize" :total="companyTotal" @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"></NormalPagination>
        </template>
        <template slot="two">
          <el-table v-loading="loading" :data="selfTableList" style="width: 100%" height="400" :header-cell-style="headerCellStyle" :row-style="rowStyle" :cell-style="cellStyle">
            <el-table-column type="index" width="55" align="center" label="序号" />
            <el-table-column label="标题" prop="materialName" min-width="220">
              <template slot-scope="{ row }">
                <div style="color: #082aff;cursor: pointer;" @click="toInfo(row , '1')">
                  {{ row.materialName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column label="标签" min-width="220">
              <template slot-scope="scope">
                <tagGroupShowTable :tagGroup="scope.row.tagVOS" />
              </template>
            </el-table-column>
            <el-table-column label="创建类型">
              <template slot-scope="{ row }">
                <el-tag v-if="row.verbalType == 2" type="default" size="small">转载</el-tag>
                <el-tag v-else type="success" size="small">原创</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="创建人" prop="createBy" min-width="160"></el-table-column>
            <el-table-column label="创建时间" prop="createTime" min-width="180"></el-table-column>
            <el-table-column label="操作" align="center" fixed="right" width="180" class-name="small-padding fixed-width">
              <template slot-scope="{ row }">
                <el-button type="text" @click="share" class="tag-copy" :data-clipboard-text="routerPath + row.id">分享
                </el-button>
                <el-button type="text" @click="edit(row, 'two' , 1)" v-hasPermi="['wecom:material:edit']">编辑
                </el-button>
                <el-button type="text" @click="del(row)" v-hasPermi="['wecom:material:delete']">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <NormalPagination :currentPage="selfPageNum" :pageSize="selfPageSize" :total="selfTotal" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
          </NormalPagination>
        </template>
        <template v-if="currentTab === '1'" slot="material-btn">
          <el-button icon="el-icon-plus" type="primary" @click="toArticle()">创建文章</el-button>
        </template>
      </NormalMaterial>
    </div>
  </div>
</template>

<script>
import { articleDel, articleDelCorp, articleList } from '@/api/article/group'
import { dateFormat } from '@/utils'

export default {
  name: 'Article',
  data() {
    return {
      routerPath: '',
      tabList: [
        { label: '企业文章库', vlaue: '0', slotName: 'one' },
        { label: '我创建的文章', vlaue: '1', slotName: 'two' },
      ],
      queryForm: {
        materialName: '',
      },
      searchNameA: '',
      searchNameB: '',
      formList: [
        {
          label: '文章标题',
          value: '',
          prop: 'materialName',
          type: 'INPUT',
          emunName: '',
        },
      ],
      currentTab: '0',
      loading: false,
      companyTableList: [],
      companyTotal: 0,
      companyPageNum: 1,
      companyPageSize: 20,
      selfTableList: [],
      selfTotal: 0,
      selfPageNum: 1,
      selfPageSize: 20,
      headerCellStyle: {
        background: '#F8F8F8',
        color: '#1D1D1D',
        height: '40px',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
      },
      rowStyle: {
        height: '40px',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
      cellStyle: {
        height: '40px',
        padding: '0',
        textAlign: 'center',
        borderLeft: 'none',
        borderRight: 'none',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        whiteSpace: 'nowrap',
      },
    }
  },
  created() {
    this.routerPath = window.globalConfig.SHARE_URL + '/linkArticle?id='
    this.currentTab = this.$route.query.is_person ? this.$route.query.is_person + '' : '0'
    this.handleQuery()
  },
  methods: {
    tabClick(val) {
      this.categoryId = ''
      this.queryForm.materialName = val == '0' ? this.searchNameA : this.searchNameB
      this.currentTab = val
      this.handleQuery(this.categoryId)
    },
    handleQuery(categoryId, pageNum) {
      this.loading = true
      this.categoryId = categoryId
      let tempNum = this.currentTab == '0' ?  this.companyPageNum : this.selfPageNum
      let tempSize = this.currentTab == '0' ?  this.companyPageSize : this.selfPageSize
      articleList({
        pageNum: pageNum || tempNum,
        pageSize: tempSize,
        mediaType: 4,
        levelType: +this.currentTab,
        categoryId: this.categoryId,
        materialName: this.queryForm.materialName,
      }).then((res) => {
        this.loading = false
        if (res.code === 200) {
          const { rows, total } = res
          if (this.currentTab == '0') {
            this.searchNameA = this.queryForm.materialName
            this.companyTableList = rows || []
            this.companyTotal = total || 0
          } else {
            this.searchNameB = this.queryForm.materialName
            this.selfTableList = rows || []
            this.selfTotal = total || 0
          }
        }
      })
    },
    handleSizeChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = 1
        this.companyPageSize = val
      } else {
        this.selfPageNum = 1
        this.selfPageSize = val
      }
      this.handleQuery(this.categoryId)
    },
    handleCurrentChange(val) {
      if (this.currentTab == '0') {
        this.companyPageNum = val
      } else {
        this.selfPageNum = val
      }
      this.handleQuery(this.categoryId)
    },
    edit(row, name, is_person) {
      this.$router.push({
        name: 'Article/edit',
        query: {
          name,
          id: row.id,
          is_person: is_person,
        },
      })
    },
    del(row) {
      this.$confirm('确认删除文章信息', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          if (this.currentTab == '0') {
            articleDelCorp(row.id).then((res) => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.handleQuery(this.categoryId)
              }
            })
          } else if (this.currentTab == '1') {
            articleDel(row.id).then((res) => {
              if (res.code === 200) {
                this.$message.success(res.msg)
                this.handleQuery(this.categoryId)
              }
            })
          }
        })
        .catch(() => {})
    },
    share() {
      let clipboard = new this.clipboard('.tag-copy')
      clipboard.on('success', (e) => {
        this.$message({
          message: '复制链接成功!',
          type: 'success',
          duration: 2000,
        })
        //清除选中
        e.clearSelection()
        //释放内存，以防重复复制
        clipboard.destroy()
      })
      clipboard.on('error', (e) => {
        // 不支持复制
        this.$message({
          message: '复制链接失败!',
          type: 'error',
          duration: 2000,
        })
        //清除选中
        e.clearSelection()
        //释放内存，以防重复复制
        clipboard.destroy()
      })
    },
    toArticle() {
      this.$router.push({
        name: 'Article/edit',
        query: { is_person: 1 },
      })
    },
    toInfo(row, is_person) {
      this.$router.push({
        name: 'Article/Info',
        query: { id: row.id, is_person: is_person },
      })
    },
    dateFormat,
  },
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background: #fff;
  .el-tag.el-tag--success {
    background-color: #e6f9ef!important;
    border-color: #67c23a!important;
    color: #67c23a!important;
  }
}
</style>
